<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>园中葵拍卖-登录</title>
	<link rel="stylesheet" type="text/css" href="css/common.css">
	<link rel="stylesheet" type="text/css" href="css/login.css">

	<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
	<!--导入jquery-->
	<script src="js/jquery-3.3.1.js"></script>
	<script>
		$(function () {
			//1.给登录按钮绑定单击事件
			$("#btn_sub").click(function () {
				if( checkPassword() && checkTelephone()) {
					//2.发送ajax请求，提交表单数据
					$.post("user?method=login&telephone=" + $("#telephone").val() + "&password=" + $("#password").val() + "&check=" + $("#check").val(), $("loginForm").serialize(), function (data) {
						//data:(flag:false,errorMsg:'')
						if (data.flag) {
							//登录成功
							location.href = "/user?method=success&telephone="+$("#telephone").val()
						} else {
							//登录失败
							$("#errorMsg").html(data.errorMsg);
						}
					})
				}
				return false;
			});
			//当某一个组件失去焦点是，调用对应的校验方法
			$("#telephone").blur(checkTelephone);
			$("#password").blur(checkPassword);
		});

		//校验手机号
		function checkTelephone(){
			//1.获取手机号
			var telephone = $("#telephone").val();
			//2.定义正则
			var reg_telephone = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;
			//3.判断
			var flag = reg_telephone.test(telephone);
			if(flag){
				$("#telephone").css("border","");
			}else{
				$("#telephone").css("border","1px solid red");
			}

			return flag;
		}

		//校验密码
		function checkPassword() {
			//1.获取密码值
			var password = $("#password").val();
			//2.定义正则
			var reg_password = /^\w{3,20}$/;

			//3.判断，给出提示信息
			var flag = reg_password.test(password);
			if(flag){
				//密码合法
				$("#password").css("border","");
			}else{
				//密码非法,加一个红色边框
				$("#password").css("border","1px solid red");
			}

			return flag;
		}


	</script>
</head>

<body>
<!--引入头部-->
<div id="header"></div>
<!-- 头部 end -->
<section id="login_wrap">
	<div class="fullscreen-bg" style="background: url(image/logo_bg.jpg);height: 695px;">

	</div>
	<div class="login-box">
		<div class="title">
			<img src="image/pm.png" alt="">
			<span>欢迎登录园中葵拍卖账户</span>
		</div>
		<div class="login_inner">

			<!--登录错误提示消息-->
			<div id="errorMsg" class="alert alert-danger" ></div>
			<form id="loginForm" action="" method="post" accept-charset="utf-8">
				<input type="hidden" name="action" value="login"/>
				<input name="telephone" id="telephone" type="text" placeholder="请输入手机号" autocomplete="off">
				<input name="password" id="password" type="password" placeholder="请输入密码" autocomplete="off">
				<div class="verify">
					<input id="check" name="check" type="text" placeholder="请输入验证码" autocomplete="off">
					<span><img src="checkCode" alt="" onclick="changeCheckCode(this)"></span>
					<script type="text/javascript">
						//图片点击事件
						function changeCheckCode(img) {
							img.src="checkCode?"+new Date().getTime();
						}
					</script>
				</div>
				<div class="submit_btn">
					<button type="button" id="btn_sub">登录</button>
					<div class="auto_login">
						<input type="checkbox" name="" class="checkbox">
						<span>自动登录</span>
					</div>
				</div>
			</form>
			<div class="reg">没有账户？<a href="register.html">立即注册</a></div>
		</div>
	</div>
</section>
<!--引入尾部-->
<div id="footer"></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

</body>

</html>